<!--
 * @Description:
 * @Author:       zhengxu
 * @Date: 2021-11-13 10:11:47
 * @LastEditors:  zhengxu
 * @LastEditTime: 2021-11-13 15:18:24
-->
<template>
  <div class="nav">
    <div
      v-for="(item, index) in menuList"
      :key="index"
      :class="['nav_item',{'checked': item.name == activeNav}]"
      @click="onNavClick(item)">
      <span>{{ item.title }}</span>
      <CloseOutlined
        v-if="menuList.length > 1"
        class="close"
        @click.stop="removeNav(index)"/>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { CloseOutlined } from '@ant-design/icons-vue'

const store = useStore()
const router = useRouter()
// 当前选中菜单
const activeNav = computed(() => store.state.base.activeMenu)
// 已选菜单列表
const menuList = computed(() => store.state.base.menuList)
/**
 * 菜单点击
 * 路由跳转并记录当前路由
 * @param {Object} nav 选中的菜单信息
 */
const onNavClick = ({ name, path }) => {
  router.push(path)
}

const removeNav = (index) => {
  store.commit('base/removeMenu', index)
  let firstMenu = menuList.value[0]
  onNavClick(firstMenu)
}

</script>

<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: flex-start;
  align-content: flex-end;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
  background-color: white;
  .nav_item {
    height: 100%;
    width: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 14px;
    &.checked {
      border-bottom: solid 3px #266fe8;
      color: #266fe8;
      .close {
        color: #266fe8;
      }
    }
    .close {
      color: #d7d7d7;
      width: 16px;
      margin-left: 10px;
    }
  }
}
</style>
